<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8"/>
    <meta name="renderer" content="webkit|ie-comp|ie-stand" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
    <title>范客直播</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .wrap{
            width: 100%;
            height: 100%;
            position: relative;
            background:url(/faxsun-info/img/qrcode_bg.png);
            -moz-background-size:100% 100%;
   			background-size:100% 100%;
   			padding: 0 5%;
   			text-align: center;
   			padding-top: 50px;
        }
        .wrap > div{
			display: block;
        }

		
		.title{
			font-size: 22px;
			font-weight: bold;
			width: 100%;
		}

		.desc{
			  margin-top: 30px;
  			  font-size: 18px;
  			  width: 100%;
		}

		.common-desc{
			  margin-top: 20px;
  			  font-size: 18px;
  			  width: 100%;
		}

		.common-desc p{
			 margin-top: 10px;
		}

		.common-desc p span{
			 color: #ff4800;
		}

		.wrap > div#qrcode{
			margin-top: 10px;
		}

        .wrap > div#qrcode > img{
        	  margin: auto;
        } 

        .hint{
        	margin-top: 10px;
        	font-size:15px;
        	color: white;
        	width: auto;
        }

        .hint span{
        	  background-color: #003562;
			  padding: 5px 5px;
			  border-radius: 10px;
        }

       
    </style>
    <script type="text/javascript"  th:src="@{/lib/jquery.min.js}"></script>
	<script type="text/javascript" src="qrcode.js" th:src="@{/src/js/live/qrcode.min.js}"></script>
   
</head>

<body>
    <div class="wrap">

    	<div class="title" th:inline="text">[[${channel.topic}]]</div>
    	<div class="desc" th:inline="text">[[${channel.description}]]
    	</div>
    	<div class="common-desc">
    		<p><span>手机微信</span>扫一扫</p>
    		<p>赶快加入吧！</p>
    	</div>

    	<div id="qrcode" th:attr="qrcode_url=${url}"></div>

    	<div class="hint"><span>仅限手机微信端扫描打开</span></div>

      
    </div>

     <script type="text/javascript">
     $(function(){
     	var qrcode = new QRCode(document.getElementById("qrcode"), {
			width : 150,
			height : 150
		});
		qrcode.makeCode($("#qrcode").attr("qrcode_url"));
     })
    	
    </script>
</body>

</html>
